<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8" isELIgnored="false"%>
<%@ include file="/WEB-INF/views/shared/taglib.jsp"%>
<div class="row panel-body" style="margin: 10px 20px;">
	<div class="col-sm-2">
		<div class="col-sm-12 loadTab-button" style="margin-left: 3px;margin-top: 10px;">
			<t:button style="width:100%;background-color:#13dbef;color:white" cssClass="" csize="60px"  icon="icon-users2" ><p style="margin-top: 5px">团队代数(<span id="generation"></span>)</p></t:button>
		</div>
	</div>
	<div class="col-sm-2">
		<div class="col-sm-12 loadTab-button" style="margin-left: 3px;margin-top: 10px;">
			<t:button style="width:100%;background-color:#ea17d6;color:white" cssClass="" csize="60px"  icon="icon-users2" ><p style="margin-top: 5px">总人数(<span id="total"></span>)</p></t:button>
		</div>
	</div>
	<div class="col-sm-2">
		<div class="col-sm-12 loadTab-button" style="margin-left: 3px;margin-top: 10px;">
			<t:button style="width:100%;background-color:#27a9e3;color:white" cssClass="" csize="60px"  icon="icon-users2" ><p style="margin-top: 5px">高创人数(<span id="highMaker"></span>)</p></t:button>
		</div>
	</div>
	<div class="col-sm-2">
		<div class="col-sm-12 loadTab-button" style="margin-left: 3px;margin-top: 10px;">
			<t:button style="width:100%;background-color:#28b779;color:white" cssClass="" csize="60px"  icon="icon-users2" ><p style="margin-top: 5px">初创人数(<span id="maker"></span>)</p></t:button>
		</div>
	</div>
	<div class="col-sm-2">
		<div class="col-sm-12 loadTab-button" style="margin-left: 3px;margin-top: 10px;">
			<t:button style="width:100%;background-color:#852b99;color:white" cssClass="" csize="60px"  icon="icon-users2" ><p style="margin-top: 5px">会员人数(<span id="vip"></span>)</p></t:button>
		</div>
	</div>
	<div class="col-sm-2">
		<div class="col-sm-12 loadTab-button" style="margin-left: 3px;margin-top: 10px;">
			<t:button style="width:100%;background-color:#ffb848;color:white" cssClass="" csize="60px"  icon="icon-users2" ><p style="margin-top: 5px">游客人数(<span id="visitor"></span>)</p></t:button>
		</div>
	</div>
</div>
<div class="table-responsive" style="overflow: auto;">
	<table class="cntable-tree table table-bordered tree-table">
		<thead>
			<tr>
				<th style="width: 80px;">序号</th>
				
				<th>用户名</th>
				<th style="width: 100px;text-align:center">昵称</th>
				<th style="width: 80px;text-align:center">用户标识</th>
				<th style="width: 60px;text-align:center">性别</th>
				<th style="width: 60px;">客户级别</th>
				<th style="width: 60px;">电话</th>
				<th style="width: 200px;">地区</th>
				<th style="width: 60px;">介绍人标识</th>
				<th style="width: 100px;">查看</th>
				<th style="width: 100px;">切换</th>
			</tr>
		</thead>
		<tbody>
			<tr>
			
				<td class="rank"></td>
				<td></td>
				<td class="text-center"></td>
				<td class="text-center"></td>
				<td class="text-center"></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td class="text-left">
					<ul class="icons-list" style="padding: 0px;">
						<li> 
							<a href="javascript:selData()" title="点击查看"><i class="fa fa-hand-o-right text-primary"></i>&nbsp;<span style>详情</span></a>
						</li>
					</ul> 
			    </td> 
			    <td class="text-left">
					<ul class="icons-list" style="padding: 0px;">
						<li>
							<a href="javascript:changeView()" title="点击切换"><i class="icon-loop4 text-primary"></i>&nbsp;<span>切换视角</span></a>
					   </li>
					</ul>
			    </td> 
			</tr>
		</tbody>
	</table>
</div>
<input type="hidden" id="key" value="${key}">
<script type="text/javascript">

$(function(){
	$(".table-responsive").css("max-height",$(window).height()-140);
	 //用于统计一共有多少代
	
	 $(".tree-table").fancytree({
	        extensions: ["table"],
	        table: {
	            indentation: 20,      // indent 20px per node level
	            nodeColumnIdx: 1
	        },
	        source: {
	            url: $.getVirtualPath()+"/admin/cust/teamClass/customerJson?key=${key}&state=" + 0
	        },
	        renderColumns: function(event, data) {
	            var node = data.node,
	            $tdList = $(node.tr).find(">td");

	            $tdList.eq(0).text(node.getIndexHier()).css("text-align","left");
	            
	            
	            
	            $(node.tr).attr("data-id",node.data.id);
	            $tdList.eq(3).text(node.data.userIdentity);
	            $tdList.eq(2).text(node.data.nickname);
	            $tdList.eq(4).html(node.data.sex == '2'?"<span class='text-danger'>女</span>":"<span class='text-success'>男</span>");
	            
	            var level = '';
	            if(node.data.level == 'visitor'){
	            	level = "游客";
	            }else if(node.data.level == 'vip'){
	            	level = "会员";
	            }else if(node.data.level == 'maker'){
	            	level = "<span class='text-danger'>初创</span>";
	            }else if(node.data.level == 'highMaker'){
	            	level = "<span class='text-success'>高创</span>";
	            }
	            
	            $tdList.eq(5).html(level);
	            $tdList.eq(6).text(node.data.phone);
	            $tdList.eq(7).text(node.data.region);
	            $tdList.eq(8).text(node.data.refereeIdentity);
	            
	            
	        },init:function(){
	        
	        	var  url = $.getVirtualPath()+"/admin/cust/teamClass/customerJson"
	        	$.post(url,{key:$("#key").val(),state:1},function(customerStatistic){
	        		$("#generation").text(customerStatistic.generation);
	        		$("#total").text(customerStatistic.total);
	        		$("#highMaker").text(customerStatistic.highMaker);
	        		$("#maker").text(customerStatistic.maker);
	        		$("#vip").text(customerStatistic.vip);
	        		$("#visitor").text(customerStatistic.visitor);
	        		
	        	},'json');
	        	
	        	bindTreeDblClick(); 

	        }
	    });
});
function getGeneration(){
	/* var count = 0;
	$(".rank").each(function(index){
		var s=$(this).text();
        var n=(s.split('.')).length;
        if(n > count){
        	count = n;
        }
	})
	
	alert("几代数量为：" + count); */
}
</script>